<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
                canvas{
                    border: 1px solid red;
                }
            </style>
        </head>
<body>
<canvas ID="box" width="500" height="500">您的浏览器不支持画布</canvas>

</body>
<script type="text/javascript">
    //通过画布获取画布
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    //清除画布
    pen.clearRect(0,0,box.width,box.height);
    for(var i=0;i<=100;i+=20){
        pen.beginPath();
        pen.arc(100,100,i,0,Math.PI*2,true);
        pen.closePath();
        pen.stroke();
    }

    //
    pen.translate(250,250);
    for(var i=100;i>=20;i-=20){
        pen.beginPath();
        var a=Math.floor(Math.random()*255);
        var b=Math.floor(Math.random()*255);
        var c=Math.floor(Math.random()*255);
        pen.arc(0,0,i,0,Math.PI*2,true);
        pen.fillStyle="rgb("+a+","+b+","+c+")";
        pen.fill();
        pen.closePath();
        pen.stroke();
    }




</script>
</body>
</html>